<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 600px;
				margin: auto;
				border-collapse: collapse;
				text-align: center;
			}
			table,tr,th,td{
				border: 1px solid red;
			}
			.checkAll{
				width: 50px;
			}
			.operation{
				width: 130px;
			}
			tr:nth-child(even){
				background-color: #f90;
			}
		</style>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<label>
					姓名:<input type="text" v-model="obj.user"  />
				</label>
				<br />
				<label>
					年龄:<input type="number" v-model.number="obj.age"  />
				</label>
				<br />
				性别:
				<label>
					男:<input type="radio" name="sex" value=0 v-model="obj.sex"  />
				</label>
				<label>
					女:<input type="radio" name="sex" value=1 v-model="obj.sex"  />
				</label>
				<br  />
				<button type="button" @click="add">添加</button>
				<button type="button" @click="updf">确认修改</button>
				<br  />
				<label>
					请输入要查询的名字/年龄/性别<br  />
					<input type="text"  v-model="findVal" />
				</label>
				<button type="button" @click="findFun">查询</button>
				<br />
				<br />
				<br />
			</div>
			<table>
				<thead>
					<tr>
						<th :class="myCla1">
							<input type="checkbox" v-model="checkAll" @change="allCheck"/>
						</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th :class="myCla2">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in arr">
						<td>
							<input type="checkbox" :value="item.id" v-model="checkArr" @change="isCheckAll" />
						</td>
						<td>{{item.user}}</td>
						<td>{{item.age}}</td>
						<td>{{item.sex?"女士":"先生"}}</td>
						<td :class="myCla3">
							<button type="button" @click="del(item.id)">删除</button>
							<button type="button" @click="upd(item)">修改</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div>
				<button type="button" @click="postData">提交数据</button>
			</div>
		</div>
		<script>
			var app=new Vue({
				el:"#app",
				data:{
					obj:{
						user:"",
						age:0,
						sex:0
					},
					findVal:"",
					myCla1:"checkAll",
					myCla2:"operation",
					myCla3:"operation",
					arr:[
						{id:"01",user:"aa",age:15,sex:0},
						{id:"02",user:"bb",age:16,sex:1},
						{id:"03",user:"cc",age:17,sex:0},
						{id:"04",user:"dd",age:18,sex:1},
						{id:"05",user:"ee",age:19,sex:0},
						{id:"06",user:"ff",age:20,sex:1}
					],
					checkAll:false,
					checkArr:[]
				},
				methods:{
					add(){
						console.log("要添加的数据:obj",this.obj);
					},
					allCheck(){
						console.log("计算属性:",this.arr1);
						var checkAll=this.checkAll;
						console.log("checkAll:",checkAll,checkAll?"选中":"未选中");
						if(checkAll){
//							var arr0=this.arr.map(function(a){
//								//console.log("a.id:",a.id);
//								return a.id;
//							});
//							//console.log("arr0:",arr0);
//							this.checkArr=arr0;
							this.checkArr=this.arr1
						}else{
							this.checkArr=[]
						}
					},
					isCheckAll(){
						//console.log("0000");
						var len0=this.arr1.length;
						var len=this.checkArr.length;
						if(len0==len){
							var f=true;
						}else{
							f=false;
						}
						this.checkAll=f;
					},
					del(id){
						console.log("你要删除的id:",id);
					},
					upd(obj){
						console.log("你要修改的数据:",obj);
					},
					postData(){
						var checkArr=this.checkArr;
						console.log("提交的商品id:",checkArr);
						var arr2=this.arr.filter(function(a){
							return checkArr.includes(a.id);
						});
						console.log("arr2:",arr2);
					},
					findFun(){
						
					},
					updf(){
						
					}
				},
				computed:{
					arr1(){
						return this.arr.map(function(a){
							//console.log("a.id:",a.id);
							return a.id;
						});
					}
				}
			});
		</script>
	</body>
</html>
